<template>
	<el-dialog title="选择学员" :visible.sync="visible" width="992px" top="0" append-to-body>
		<div class="select_student_wrapper" v-loading="loading">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.userName" clearable placeholder="用户名" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="queryData.account" clearable placeholder="用户账号" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<sw-depart-select v-model="queryData.deptId" clearable placeholder="用户部门" style="width: 180px" />
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.roleIds" clearable placeholder="用户角色" style="width: 180px">
						<el-option v-for="(item, index) in roleListData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="table" size="medium" row-key="id" :data="tableData" height="100%" @row-click="handleRowClick">
				<el-table-column type="selection" width="42" align="center" reserve-selection :selectable="handleSelectable" />
				<el-table-column label="用户名/账号" min-width="180">
					<template slot-scope="{ row }">{{ row.userName }}/{{ row.account }}</template>
				</el-table-column>
				<el-table-column prop="deptName" label="部门" min-width="180"></el-table-column>
				<el-table-column label="角色" min-width="360">
					<template slot-scope="{ row }">
						<template v-if="row.menuRoleList.length === 0">
							<el-tag size="small" disable-transitions>--</el-tag>
						</template>
						<template v-else>
							<template v-for="(item, index) in row.menuRoleList">
								<el-tag size="small" disable-transitions>{{ item.name }}</el-tag>
							</template>
						</template>
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</div>
		</div>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="loading" @click="handleSubmitSelected()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { getRoleList } from '@/api/system/tbSysRole';
import { getUserList } from '@/api/system/tbSysUser';
import { courseDetail } from '@/api/course/sysCourse';
import { registerCourseStudy } from '@/api/course/sysCourseStudent';
export default {
	props: {
		value: { type: Boolean, default: false },
		list: { type: Array, default: () => [] },
		courseId: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			roleListData: [],
			courseData: {},
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			tableData: [],
			btnLoading: false
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.initializeData();
		}
	},
	methods: {
		//初始化弹出框数据
		async initializeData() {
			this.loading = true;
			await this.getCourseData();
			await this.getRoleData();
			await this.getUserData();
		},

		//获取课程数据
		async getCourseData() {
			let result = await courseDetail(this.courseId).then((res) => res.data);
			if (result.code === '0') {
				this.courseData = this.$detailData(result.data);
			}
		},

		//获取角色数据
		async getRoleData() {
			let params = { page: 1, limit: 999 };
			let result = await getRoleList(params).then((res) => res.data);
			if (result.code == '0') {
				this.roleListData = result.data || [];
			}
		},

		//获取用户数据
		async getUserData() {
			let params = { ...this.queryData };
			let result = await getUserList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
				this.$nextTick(() => {
					this.tableData.forEach((n) => {
						if (this.list.some((m) => m.studentId === n.id)) {
							this.$refs['table'].toggleRowSelection(n, true);
						}
					});
				});
			}
		},

		//查询用户数据
		queryTableData() {
			this.loading = true;
			this.getUserData();
		},

		//判断是否可选
		handleSelectable(row, index) {
			return !this.list.some((n) => n.studentId === row.id);
		},

		//选择用户
		handleRowClick(row, column, event) {
			if (!this.list.some((n) => n.studentId === row.id)) {
				this.$refs['table'].toggleRowSelection(row);
			}
		},

		//提交选择的数据
		handleSubmitSelected() {
			let selected = this.$refs['table'].selection;
			let selectFilter = selected.filter((n) => {
				return !this.list.some((m) => m.studentId === n.id);
			});
			this.btnLoading = true;
			this.addedStudentRequest(selectFilter);
		},

		//添加学员参数
		addedStudentParams(arr) {
			let createBy = this.courseData.createBy;
			let params = { courseId: this.courseId };
			params['courseOriginator'] = createBy;
			params['studentId'] = arr.join();
			params['auditStatus'] = '2';
			params['orderBy'] = '10';
			return params;
		},

		//添加学员请求
		async addedStudentRequest(arr) {
			let studentIds = arr.map((n) => n.id);
			let params = this.addedStudentParams(studentIds);
			let result = await registerCourseStudy(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.visible = false;
				this.$emit('refresh');
				this.$message.success('添加学员成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.select_student_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 274px);
	width: 100%;
	.el-form {
		flex-shrink: 0;
		margin-bottom: 16px;
	}
	.el-table {
		width: 100%;
		border: solid 1px #ebeef5;
		border-bottom: none;
	}
	tr.el-table__row {
		cursor: pointer;
	}
	th.el-table__cell {
		background-color: #f5f7fa;
	}
	.el-pagination {
		margin-top: 16px;
	}
}
</style>
